<template>
  <div class="banner">
    <!-- 添加轮播图的表单 -->
    <el-form :model="formData" label-width="80px" style="width: 60%">
      <el-form-item label="标题">
        <el-input v-model="formData.title" placeholder="请输入标题" />
      </el-form-item>
      <el-form-item label="图片">
        <el-upload
          class="avatar-uploader"
          :action="action"
          :headers="headers"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width: 160px; height: 80px;" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="链接">
        <el-input v-model="formData.link" placeholder="请输入链接" />
      </el-form-item>
      <el-form-item label="有效期">
        <el-date-picker v-model="formData.startTime" type="datetime" placeholder="选择开始时间" />
        <el-date-picker v-model="formData.endTime" type="datetime" placeholder="选择结束时间" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSave">提交</el-button>
      </el-form-item>
    </el-form>




    <table-pro :columns="columns" :requestApi="getBannerList">
      <template #image="{ row }">
        <img :src="row.image" alt="" style="width: 100px; height: 60px;" />
      </template>
      <template #expires="{ row }">
        {{ dayjs(row.startTime).format('YYYY-MM-DD HH:mm:ss') }} -
        {{ dayjs(row.endTime).format('YYYY-MM-DD HH:mm:ss') }}
      </template>
    </table-pro>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getBannerList, saveBanner } from '@/api/banner'
import dayjs from 'dayjs'
import useUserStore from '@/store/user'

import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'

const store = useUserStore()
const imageUrl = ref('')

const columns: ITableColumn[] = [
  { prop: 'title', label: '标题', fixed: true },
  { prop: 'image', label: '图片', type: 'slot', width: '160px' },
  { prop: 'link', label: '链接', width: '360px' },
  { prop: 'expires', label: '有效期', type: 'slot' }
]

// 表单数据
const formData = ref({
  title: '',
  image: '',
  link: '',
  startTime: '',
  endTime: ''
})

// 文件上传时的后端接口 action 地址
const action = import.meta.env.VITE_API_BASE_URL + '/api/v1/admin/files'
// 发送上传请求时，需要在请求头中添加认证 token
const headers = {
  Authorization: `Bearer ${store.token}`
}
/**
 * 图片上传成功
 */
const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  // 预览, 将上传成功的文件的地址赋值给 imageUrl
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
  // 响应数据
  console.log('response:', response)
  formData.value.image = response.data.file
}

/**
 * 图片上传之前的校验
 */
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  const types = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
  if (!types.includes(rawFile.type)) {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}

// 添加保存
const handleSave = async () => {
  const result = await saveBanner(formData.value)
  console.log('保存结果:', result)
}
</script>

<style lang="scss">
.avatar-uploader {
  width: 178px;
  height: 178px;

  .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  img {
    width: 100%;
    height: 100%;
  }
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
